<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_边框与内间距</title>
    <style>
      .z1 {
        width: 200px;
        height: 200px;
        background-color: lightgreen;
        border: 5px solid green;/* 设置四个方向的边框 */
        border-bottom: 15px dotted purple;/* 也可以设置单方向的边框*/
        margin-bottom: 30px;
      }
      .z2 {
        width: 200px;
        height: 200px;
        background-color: lightsalmon;
        /* 边框圆角,值越大,角越圆,如果值为正方形宽高的一半,可以切正圆*/
        border-radius: 100px;
        margin-bottom: 30px;
      }
      .z3 {
        width: 200px;
        height: 60px;
        background-color: lightblue;
        /* 如果值为长方形高度的一半,可以切胶囊型*/
        border-radius: 30px;
      }
      .z4 {
        width: 200px;
        height: 200px;
        border: 5px solid red;
        /* 无论加边框还是内间距,都会让元素本身的大小变大 */
        padding: 10px;
        padding: 10px 20px;
        padding: 10px 20px 30px;
        padding: 10px 20px 30px 40px;
        padding-top:50px;
        margin: 20px;
      }
      .z5 {
        width: 200px;
        height: 200px;
        border: 10px solid red;
        padding: 20px;
        margin: 30px;
      /* 切换盒子模型的计算方案:为边框盒子
        效果:将"内间距+边框+内容"的总大小都算在预设的宽高之内!靠压缩内容的大小来实现
        注意:此方案必须要有预设的宽高!否则无法生效!*/
        box-sizing: border-box;
      }
    </style>
</head>
<body>
  <div class="fu">
    <div class="z1">111</div>
    <div class="z2">222</div>
    <div class="z3">333</div>
    <div class="z4">444</div>
    <div class="z5">555</div>
  </div>
</body>
</html>